<!-- src/view/MaterialArrival.vue -->
<template>
  <div class="material-arrival-container">
    <h1>库存管理流程</h1>
    
    <!-- 流程步骤 -->
    <el-steps :active="activeStep" finish-status="success" simple>
      <el-step title="原材料入库" />
      <el-step title="生产领料" />
      <el-step title="成品入库" />
      <el-step title="库存盘点与调整" />
    </el-steps>
    
    <!-- 原材料入库 -->
    <div v-show="activeStep === 1" class="step-content">
      <el-card>
        <div slot="header">
          <span>原材料入库</span>
        </div>
        <el-form :model="rawMaterialForm" :rules="rawMaterialRules" ref="rawMaterialFormRef" label-width="120px">
          <el-form-item label="原材料ID" prop="item_id">
            <el-input v-model.number="rawMaterialForm.item_id" placeholder="请输入原材料ID" />
          </el-form-item>
          <el-form-item label="入库数量" prop="quantity">
            <el-input-number v-model="rawMaterialForm.quantity" :min="1" />
          </el-form-item>
          <el-form-item label="位置" prop="location">
            <el-input v-model="rawMaterialForm.location" placeholder="请输入存储位置" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitRawMaterial">确认入库</el-button>
            <el-button @click="nextStep">下一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    
    <!-- 生产领料 -->
    <div v-show="activeStep === 2" class="step-content">
      <el-card>
        <div slot="header">
          <span>生产领料</span>
        </div>
        <el-form :model="materialUsageForm" :rules="materialUsageRules" ref="materialUsageFormRef" label-width="120px">
          <el-form-item label="原材料ID" prop="item_id">
            <el-input v-model.number="materialUsageForm.item_id" placeholder="请输入原材料ID" />
          </el-form-item>
          <el-form-item label="领料数量" prop="quantity">
            <el-input-number v-model="materialUsageForm.quantity" :min="1" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitMaterialUsage">确认领料</el-button>
            <el-button @click="nextStep">下一步</el-button>
            <el-button @click="prevStep">上一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    
    <!-- 成品入库 -->
    <div v-show="activeStep === 3" class="step-content">
      <el-card>
        <div slot="header">
          <span>成品入库</span>
        </div>
        <el-form :model="productStorageForm" :rules="productStorageRules" ref="productStorageFormRef" label-width="120px">
          <el-form-item label="产品ID" prop="item_id">
            <el-input v-model.number="productStorageForm.item_id" placeholder="请输入产品ID" />
          </el-form-item>
          <el-form-item label="入库数量" prop="quantity">
            <el-input-number v-model="productStorageForm.quantity" :min="1" />
          </el-form-item>
          <el-form-item label="位置" prop="location">
            <el-input v-model="productStorageForm.location" placeholder="请输入存储位置" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitProductStorage">确认入库</el-button>
            <el-button @click="nextStep">下一步</el-button>
            <el-button @click="prevStep">上一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    
    <!-- 库存盘点与调整 -->
    <div v-show="activeStep === 4" class="step-content">
      <el-card>
        <div slot="header">
          <span>库存盘点与调整</span>
        </div>
        <el-form :model="inventoryAdjustmentForm" :rules="inventoryAdjustmentRules" ref="inventoryAdjustmentFormRef" label-width="120px">
          <el-form-item label="库存ID" prop="id">
            <el-input v-model.number="inventoryAdjustmentForm.id" placeholder="请输入库存ID" />
          </el-form-item>
          <el-form-item label="调整数量" prop="quantity">
            <el-input-number v-model="inventoryAdjustmentForm.quantity" :min="0" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitInventoryAdjustment">确认调整</el-button>
            <el-button @click="resetForm">重置</el-button>
            <el-button @click="prevStep">上一步</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import inventoryApi from '../api/inventoryApi.js'

// 当前步骤
const activeStep = ref(1)

// 表单引用
const rawMaterialFormRef = ref()
const materialUsageFormRef = ref()
const productStorageFormRef = ref()
const inventoryAdjustmentFormRef = ref()

// 原材料入库表单
const rawMaterialForm = reactive({
  item_id: null,
  item_type: 'raw_material',
  quantity: 1,
  location: ''
})

// 生产领料表单
const materialUsageForm = reactive({
  item_id: null,
  quantity: 1
})

// 成品入库表单
const productStorageForm = reactive({
  item_id: null,
  item_type: 'product',
  quantity: 1,
  location: ''
})

// 库存盘点与调整表单
const inventoryAdjustmentForm = reactive({
  id: null,
  quantity: 0
})

// 验证规则
const rawMaterialRules = {
  item_id: [
    { required: true, message: '请输入原材料ID', trigger: 'blur' },
    { type: 'number', message: 'ID必须为数字', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入入库数量', trigger: 'blur' },
    { type: 'number', message: '数量必须为数字', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入存储位置', trigger: 'blur' }
  ]
}

const materialUsageRules = {
  item_id: [
    { required: true, message: '请输入原材料ID', trigger: 'blur' },
    { type: 'number', message: 'ID必须为数字', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入领料数量', trigger: 'blur' },
    { type: 'number', message: '数量必须为数字', trigger: 'blur' }
  ]
}

const productStorageRules = {
  item_id: [
    { required: true, message: '请输入产品ID', trigger: 'blur' },
    { type: 'number', message: 'ID必须为数字', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入入库数量', trigger: 'blur' },
    { type: 'number', message: '数量必须为数字', trigger: 'blur' }
  ],
  location: [
    { required: true, message: '请输入存储位置', trigger: 'blur' }
  ]
}

const inventoryAdjustmentRules = {
  id: [
    { required: true, message: '请输入库存ID', trigger: 'blur' },
    { type: 'number', message: 'ID必须为数字', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入调整数量', trigger: 'blur' },
    { type: 'number', message: '数量必须为数字', trigger: 'blur' }
  ]
}

// 步骤控制
const nextStep = () => {
  if (activeStep.value < 4) {
    activeStep.value++
  }
}

const prevStep = () => {
  if (activeStep.value > 1) {
    activeStep.value--
  }
}

// 重置表单
const resetForm = () => {
  rawMaterialForm.item_id = null
  rawMaterialForm.quantity = 1
  rawMaterialForm.location = ''
  
  materialUsageForm.item_id = null
  materialUsageForm.quantity = 1
  
  productStorageForm.item_id = null
  productStorageForm.quantity = 1
  productStorageForm.location = ''
  
  inventoryAdjustmentForm.id = null
  inventoryAdjustmentForm.quantity = 0
}

// 提交原材料入库
const submitRawMaterial = async () => {
  if (!rawMaterialFormRef.value) return
  
  await rawMaterialFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    try {
      const res = await inventoryApi.add({
        item_id: rawMaterialForm.item_id,
        item_type: rawMaterialForm.item_type,
        quantity: rawMaterialForm.quantity,
        location: rawMaterialForm.location
      })
      
      if (res && res.code === 200) {
        ElMessage.success('原材料入库成功')
      } else {
        ElMessage.error(res?.msg || '入库失败')
      }
    } catch (err) {
      ElMessage.error('入库失败: ' + (err.message || '请检查网络连接'))
    }
  })
}

// 提交生产领料
const submitMaterialUsage = async () => {
  if (!materialUsageFormRef.value) return
  
  await materialUsageFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    try {
      // 生产领料需要减少原材料库存，所以数量为负数
      const res = await inventoryApi.add({
        item_id: materialUsageForm.item_id,
        item_type: 'raw_material',
        quantity: -materialUsageForm.quantity, // 负数表示消耗
        location: 'production_line'
      })
      
      if (res && res.code === 200) {
        ElMessage.success('生产领料成功')
      } else {
        ElMessage.error(res?.msg || '领料失败')
      }
    } catch (err) {
      ElMessage.error('领料失败: ' + (err.message || '请检查网络连接'))
    }
  })
}

// 提交成品入库
const submitProductStorage = async () => {
  if (!productStorageFormRef.value) return
  
  await productStorageFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    try {
      const res = await inventoryApi.add({
        item_id: productStorageForm.item_id,
        item_type: productStorageForm.item_type,
        quantity: productStorageForm.quantity,
        location: productStorageForm.location
      })
      
      if (res && res.code === 200) {
        ElMessage.success('成品入库成功')
      } else {
        ElMessage.error(res?.msg || '入库失败')
      }
    } catch (err) {
      ElMessage.error('入库失败: ' + (err.message || '请检查网络连接'))
    }
  })
}

// 提交库存调整
const submitInventoryAdjustment = async () => {
  if (!inventoryAdjustmentFormRef.value) return
  
  await inventoryAdjustmentFormRef.value.validate(async (valid) => {
    if (!valid) return
    
    try {
      const res = await inventoryApi.edit({
        id: inventoryAdjustmentForm.id,
        quantity: inventoryAdjustmentForm.quantity
      })
      
      if (res && res.code === 200) {
        ElMessage.success('库存调整成功')
      } else {
        ElMessage.error(res?.msg || '调整失败')
      }
    } catch (err) {
      ElMessage.error('调整失败: ' + (err.message || '请检查网络连接'))
    }
  })
}
</script>

<style scoped>
.material-arrival-container {
  padding: 20px;
}

.step-content {
  margin-top: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</style>